import React, {Component} from 'react';
import NavBar from "../../../Components/NavBar";
import TabBar from "../../../Components/TabBar";
import {AudioOutlined,SearchOutlined} from '@ant-design/icons';
import './index.css';
import Banner from "./components/Banner";
import SubNav from "./components/SubNav";
import Cate from "../../../Components/Cate";
import SlideArea from "../../../Components/SlideArea";
import {RightOutlined,UndoOutlined} from '@ant-design/icons';
import SingleAlbums from "../../../Components/SingleAlbum";


class Found extends Component {
    state = {
        banners:[],
        subnavs:[
            {title:"每日推荐",icon:"icon-rili"},
            {title:"私人FM",icon:"icon-shouyinji"},
            {title:"歌单",icon:"icon-yinleliebiao"},
            {title:"排行榜",icon:"icon-paixingbang"},
            {title:"直播",icon:"icon-15"},
            {title:"数字专辑",icon:"icon-zhuanji"},
            {title:"专注冥想",icon:"icon-mingxiang"},
            {title:"歌房",icon:"icon-xingxing"},
            {title:"游戏专区",icon:"icon-wangyou"},
        ],
        songList: [],
        mvList:[],
    }
    getBanner = () =>{
        this.$api.getBanner().then(data=>{
            this.setState({banners:data.banners})
        })
    }
    getCates = ()=>{
        this.$api.getCates().then(data=>{
            console.log(data)
            // ['推荐歌单',]
            this.setState({songList:data[0].result,mvList:data[1].result})
        })
    }
    componentDidMount() {
        this.getBanner();
        this.getCates();
    }

    render() {
        const {banners,subnavs,songList,mvList} = this.state;
        return (
            <div className={"found_wrapper"}>
                <NavBar>
                    <div className={"search_wrapper"}>
                        <SearchOutlined className={'icon'}/>
                        <input type="text" className={"ipt"} placeholder={"新人必听"}/>
                    </div>
                    <div>
                        <AudioOutlined />
                    </div>
                </NavBar>
                <main>
                    {/*副导航栏*/}
                    <div className={"banner_area"}>
                        <Banner banners={banners}></Banner>
                        <SubNav subnavs={subnavs}></SubNav>
                    </div>
                    {/*推荐歌单: 给slideArea传下面的循环项,循环参数,路由跳转*/}
                    <Cate>
                        <div>推荐歌单</div>
                        <div><span>更多</span><RightOutlined/></div>
                        <SlideArea items={songList.slice(0,6)} path={'songList'} state={'id'}/>
                    </Cate>
                    {/*精选音乐视频*/}
                    <Cate>
                        <div>精选音乐视频</div>
                        <div><UndoOutlined /><span>换一批</span></div>
                        <SlideArea items={mvList} path={'/songList'} state={'id'}></SlideArea>
                    </Cate>
                    {/*流行|经典|民谣*/}
                    <Cate>
                        <div>流行|经典|民谣 热门榜单</div>
                        <div><span>播放</span></div>
                    </Cate>
                    {/*热门博客 | 有声书*/}
                    <Cate>
                        <div><span>热门博客</span></div>
                        <div><span>更多</span><RightOutlined/></div>
                    </Cate>
                    {/*直播 | 免费黑胶待领取*/}
                    <Cate>
                        <div>直播 | 免费黑胶待领取</div>
                        <div><span>更多</span><RightOutlined/></div>
                    </Cate>
                    {/*专属场景歌单*/}
                    <Cate>
                        <div>专属场景歌单</div>
                        <div><span>更多</span><RightOutlined/></div>
                    </Cate>
                    {/*新歌新碟*/}
                    <Cate>
                        <div><span>新歌</span>| <span>新碟</span> | <span>数字专辑</span></div>
                        <div><span>更多</span><RightOutlined/></div>
                    </Cate>
                    {/*排行榜*/}
                    <Cate>
                        <div>排行榜</div>
                        <div><span>更多</span><RightOutlined/></div>
                    </Cate>
                    {/*音乐日历*/}
                    <Cate>
                        <div>音乐日历</div>
                        <div><span>今日3条</span><RightOutlined/></div>
                    </Cate>
                </main>
                <TabBar></TabBar>
            </div>
        );
    }
}

export default Found;

